<template>
  <div>
    <main class="about">
      <a-card hoverable>
        <template #cover>
          <a-image :src="cover" alt="cover"></a-image>
        </template>
        <template #actions class="ant-card-actions">
          <section v-for="action of actions" :key="action.text">
            {{ action.text }}
          </section>
        </template>
        <a-card-meta :title="title" :description="description"></a-card-meta>
      </a-card>
    </main>
  </div>
</template>
<script>
import { Image } from "ant-design-vue";
import { aboutViewConfig } from "@vp/show/about";
export default {
  components: {
    AImage: Image,
  },
  setup() {
    const { title, description, cover, actions } = aboutViewConfig;
    return { title, description, cover, actions };
  },
};
</script>

<style scoped>
.about {
  padding: 10px 50px;
  text-align: center;
}
</style>